<template> 

  <div id="app">
  
    <el-container class="layout-container-demo" style="height: 100vh; width: 100vw; margin: 0;"> 
  
      <el-aside width="250px"> 
  
        <el-scrollbar> 
  
          <el-menu 
  
            :default-active="activeMenu" 
  
            class="el-menu-vertical-demo" 
  
            @open="handleOpen" 
  
            @close="handleClose" 
  
            background-color="#333744" 
  
            text-color="#fff" 
  
            active-text-color="#ffd04b" 
  
            unique-opened> <!-- 添加 unique-opened 属性 --> 
  
            <img src="../assets/lihelogooo.jpg"  alt="" style="margin-top: 0px; margin-left: -12px; width: 260px; height: 220px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> 
  
            <!-- 循环渲染顶级菜单项 --> 
  
            <el-sub-menu 
  
              v-for="item in menulist" 
  
              :key="item.id"  
  
              background-color="#333744" 
  
              text-color="#fff" 
  
              active-text-color="#ffd04b"> 
  
              <template #title> 
  
                <span>{{ item.name  }}</span> 
  
              </template> 
  
              <!-- 循环渲染二级菜单项 --> 
  
              <el-sub-menu 
  
                v-for="subItem in item.son"  
  
                :key="subItem.id"  
  
                background-color="#333744" 
  
                text-color="#fff" 
  
                active-text-color="#ffd04b"> 
  
                <template #title> 
  
                  <span>{{ subItem.name  }}</span> 
  
                </template> 
  
                <el-menu-item 
  
                  v-for="subSubItem in subItem.son1"  
  
                  :key="subSubItem.id"  
  
                  background-color="#333744" 
  
                  text-color="#fff" 
  
                  active-text-color="#ffd04b" 
  
                  @click.native="handleMenuClick(subSubItem.url)">  
  
                  <span><RouterLink :to="subSubItem.url">{{  subSubItem.name  }}</RouterLink></span> 
  
                </el-menu-item> 
  
              </el-sub-menu> 
  
            </el-sub-menu> 
  
          </el-menu> 
  
        </el-scrollbar> 
  
      </el-aside> 
  
      <el-container> 
  
        <el-header style="text-align: right; font-size: 14px; width: auto; height: 120px;"> 
  
          <div class="toolbar"> 
  
            <el-dropdown> 
  
            </el-dropdown> 
  
            <p style="margin-right: 1270px; margin-top:10px; color: black;"> 
  
              <b style="font-weight: bold; font-size: 20px;">礼和家政后台管理系统</b> 
  
            </p> 
  
            <img :src="`http://127.0.0.1:8000${avatar}`" alt="" style="margin-right: 30px; width: 80px; height: 80px; border-radius: 50%; margin-top: 10px"> 
  
            <span @click="handleLogout" style="margin-top: 30px;">退出</span> 
  
          </div> 
  
        </el-header> 
  
        <li style="height: 1px; margin-top: -10px; background-color: #e6e6e6; width: 100%;"></li> 
  
        <el-main style="padding: 20px"> 
  
          <router-view /> 
  
        </el-main> 
  
      </el-container> 
  
    </el-container> 
  
  </div>
  
  </template> 
  
   
  
  <script setup> 
  
  import { ref, onMounted } from 'vue'; 
  
  import axios from 'axios'; 
  
  import { useRoute } from 'vue-router'; 
  
  import { ElMessage } from 'element-plus'; 
  
  import 'element-plus/dist/index.css';  
  
  import { useRouter } from 'vue-router'; 
  
  import { RouterLink, RouterView } from 'vue-router'; 
  
  const menulist = ref([]); 
  
  const avatar = ref(''); 
  
  const router = useRouter() 
  
  const route = useRoute(); 
  
  import http from "../http" 
  
   
  
  onMounted(() => { 
  
    menulist.value  = JSON.parse(localStorage.getItem('menulist'))  
  
    avatar.value  = localStorage.getItem('avatar')  
  
  }) 
  
   
  
  const handleLogout = () => { 
  
    // 在这里编写退出逻辑 
  
    console.log(' 执行退出逻辑'); 
  
    //调后端接口 
  
    try {

      const res =  http.get('/user/quit/');
      http.get('/user/quit/').then(res=>{
        console.log(res);
        console.log(res);
        // 清空本地存储
        localStorage.clear();
        // 跳转到首页
        router.push({ path: '/' });
        ElMessage.success('退出成功');});
  
    } catch (error) { 
  
      ElMessage.error(' 退出失败'); 
  
    } 
  
    // 例如，你可以清除用户信息，或者跳转到登录页面 
  
  }; 
  
  </script> 
  
     
  
  
  
  <style scoped>
  
  #app{
  
    justify-content: center;
  
    margin-left: -32px;
  
  }
  
  .layout-container-demo { 
  
    height: 100vh; 
  
    width: 100vw; 
  
    margin: 0; 
  
    background-color: #f0f0f0; /* 整体背景颜色 */ 
  
    max-width: 100%; 
  
  } 
  
  .layout-container-demo .el-header { 
  
    background-color: #ffffff; 
  
    color: var(--el-text-color-primary); 
  
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影效果 */ 
  
    /* display: flex;  */
  
    align-items: center; 
  
    /* justify-content: space-between;  */
  
    padding: 0 20px; 
  
  } 
  
   
  
  .layout-container-demo .el-aside { 
  
    color: rgb(0, 0, 0); 
  
    background: #333744; 
  
    box-shadow: 2px 0 4px rgba(0,0,0,0.1); /* 阴影效果 */ 
  
  } 
  
   
  
  .layout-container-demo .el-menu { 
  
    border-right: none; 
  
    font-size: 16px; 
  
  } 
  
   
  
  .layout-container-demo .el-menu-item, 
  
  .layout-container-demo .el-sub-menu__title { 
  
    transition: background-color 0.3s; /* 悬停效果 */ 
  
  } 
  
   
  
  .layout-container-demo .el-menu-item:hover, 
  
  .layout-container-demo .el-sub-menu__title:hover { 
  
    background-color: #444b5a; /* 悬停背景颜色 */ 
  
  } 
  
   
  
  .layout-container-demo .el-main { 
  
    padding: 20px; 
  
    background-color: #fff; /* 主内容区域背景颜色 */ 
  
    border-left: 1px solid #ebeef5; /* 主内容区域边框 */ 
  
  } 
  
   
  
  .layout-container-demo .toolbar { 
  
    display: inline-flex; 
  
    align-items: center; 
  
    height: 90%; 
  
    right: 20px; 
  
    font-size: 20px; 
  
    color: rgb(0, 0, 0); 
  
  } 
  
   
  
  .layout-container-demo .toolbar .el-icon { 
  
    margin-right: 8px; 
  
  } 
  
   
  
  .layout-container-demo .toolbar span { 
  
    cursor: pointer; 
  
    margin-right: 8px; 
  
  } 
  
  </style>